<template>
  <div class="linearBorder">
    <div class="container">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { ref, watch } from 'vue';

// interface Istyle {
//   padding?: number;
//   marginTop?: number;
// }

// const props = withDefaults(defineProps<Istyle>(), {
//   padding: 2,
//   marginTop: 0,
// });

// const padding = ref<string>(props.padding + 'px');
// const marginTop = ref<string>(props.marginTop + 'px');
</script>

<style lang="scss" scoped>
.linearBorder {
  // background-image: linear-gradient(30deg, #14affc, rgba(0, 0, 0, 0.01), #00b5fb);
  background-image: linear-gradient(105deg, #14affc, rgba(0, 0, 0, 0.01), #ff6b89);
  box-shadow: 0 0 10px 8px rgba($color: #000000, $alpha: 0.1) !important;
  // padding: v-bind(padding);
  // margin-top: v-bind(marginTop);
  padding: 2px;
  border-radius: 8px;
  .container {
    height: 100%;
    background-color: var(--main-color);
    transition: background 0.3s;
    border-radius: 8px;
  }
}
</style>
